﻿@namespace BootstrapBlazor.Components
@typeparam TValue
@inherits ValidateBase<TValue>

@if (IsShowLabel)
{
    <label class="control-label" for="@Id">@DisplayText</label>
}
<div class="@ClassString" @ref="SelectElement">
    <div class="@ToggleClassString" tabindex="0" hidefocus="true" outline="0" id="@Id" @onclick="@ToggleMenu">
        <div class="@PlaceHolderClassString">@PlaceHolder</div>
        <div class="multi-select-items">
            @foreach (var item in SelectedItems)
            {
                @if (ShowCloseButton)
                {
                    <div class="multi-select-item-group">
                        <span class="multi-select-close" @onclick:stopPropagation @onclick="@(e => ToggleRow(item))">
                            <i class="fa fa-times"></i>
                        </span>
                        <span class="multi-select-item">@item.Text</span>
                    </div>
                }
                else
                {
                    <span class="multi-select-item">@item.Text</span>
                }
            }
        </div>
    </div>
    <div class="@MenuClassString">
        @if (ShowSearch)
        {
            <div class="search">
                <input type="text" class="search-text form-control" @bind="@SearchText" @bind:event="oninput" />
                <i class="fa fa-search"></i>
            </div>
        }
        @if (ShowSelectAllButton)
        {
            <div class="toolbar">
                <button class="btn" type="button" @onclick="@SelectAll">@SelectAllText</button>
                <button class="btn" type="button" @onclick="@InvertSelect">@ReverseSelectText</button>
                <button class="btn" type="button" @onclick="@Clear">@ClearText</button>
            </div>
        }
        @foreach (var item in GetData())
        {
            <div class="@GetItemClassString(item)" @onclick="@(e => ToggleRow(item))">
                <Checkbox TValue="bool" Value="@GetCheckedState(item)"></Checkbox>
                <span>@item.Text</span>
            </div>
        }
    </div>
</div>